<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored ="false"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>北京市电子行政监察平台-职位管理</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link href="<%=path%>/css/base.css" rel="stylesheet" type="text/css" />
		<link href="<%=path%>/css/style.css" rel="stylesheet" type="text/css" />
		<link href="<%=path%>/css/frame.css" rel="stylesheet" type="text/css" />
		<link href="<%=path%>/css/jquery-tree-1.2.css" rel="stylesheet" type="text/css" />
		<link href="<%=path%>/css/jquery_ui/v1.8.13/sortable/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript">
			var path = "<%=path%>";
		</script>
		<script type="text/javascript" src="<%=path%>/javascript/core/jquery-1.6.1.min.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/core/jquery_ui/v1.8.13/sortable/jquery-ui-1.8.13.custom.min.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/core/jquery-jtemplates.pack.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/core/jquery.form.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/core/jquery.history.pack.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/core/jquery.validate.fixed.pack.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/config/config.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/system/util.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/system/oacore.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/system/jquery-tree-1.2.js"></script>
		<script type="text/javascript" src="<%=path%>/javascript/system/init.js"></script>
		<script type="text/javascript">
			var tree;
			var positionTree;
			var treeData = "<%=request.getAttribute("organizationDTOs")%>";

			var BE_UPDATESOURCE_NODE = {};

			function pushBeUpdateNodeData(list) {
				if(list)
				{
					var size = list.length;
					for(var i=0;i<size;++i)
					{
						var position = list[i];
						BE_UPDATESOURCE_NODE[position.positionId] = position;
					}
				}
			};

			function popBeUpdateNodeData(id) {
				var data = BE_UPDATESOURCE_NODE[id];
				delete BE_UPDATESOURCE_NODE[id];
				return data;
			};

			function getNodeById(id) {
				var found;
				$("span.jqtree-node-content").each(function () {
						if(id == parseInt($(this).attr("id")))
						{
							found = this;
							return false;
						}
					});
				return found;
			};

			function updateAllSource() {
				for(var id in BE_UPDATESOURCE_NODE)
				{
					var beUpdateNode = getNodeById(id);
					if(beUpdateNode)
					{
						$.extend($(beUpdateNode).data("source"), popBeUpdateNodeData(id));
						$(beUpdateNode).data("source", $(beUpdateNode).data("source"));
					}
				}
			};
			
			function moveUp()
			{
				positionTree.moveUp();
			};

			function moveDown()
			{
				positionTree.moveDown();
			};

			function delNode()
			{
				updateAllSource();
				if(!positionTree)
					return;
				var selectedContent = positionTree.getSelectedContent();
				if(selectedContent)
				{
					oacore.Widget.Dialog.confirm("删除确认", "您确定删除此项吗？", function (){
						var idInfo = selectedContent.id.split("_");
						var params = {};
						var source = $(selectedContent).data("source");
						params[ACTIONS.DEL_POSITION.params.POSITION_ID] = idInfo[0];
						params[ACTIONS.DEL_POSITION.params.VERSION] = source.version;
						params[ACTIONS.DEL_POSITION.params.POSITION_NAME] = $(selectedContent).data("source").positionName;
						$.util.Data.request({
								url: ACTIONS.DEL_POSITION.url,
								data: params,
								async: false,
								type: "post",
								success: function (data) {
									pushBeUpdateNodeData(data.positionDTOs);
									$("#positionOpArea").empty();
									positionTree.del();
								}
							});
					});
				}
			};

			function openDetail(nodeId)
			{
				var selectedContent = positionTree.getSelectedContent();
				if(!selectedContent)
					return;
				var data = $(selectedContent).data("source");
				oacore.UI.render("form/position_detail", data, $("#positionOpArea"));
			};

			function openEdit()
			{
				updateAllSource();
				if(!positionTree)
					return;
				var selectedContent = positionTree.getSelectedContent();
				if(!selectedContent)
					return;
				var data = $(selectedContent).data("source");
				var parent = $("#positionOpArea");
				data.url = ACTIONS.EDIT_POSITION.url;
				data.dataId = selectedContent.id.split("_")[0];
				var orgSelectedOrgContent = tree.getSelectedContent();
				var orgId;
				if(orgSelectedOrgContent)
					orgId = orgSelectedOrgContent.id.split("_")[0];
				else
				{
					orgId = null;
				}
				oacore.UI.render("form/edit_position", data, parent, function () {
						var form = $("#creatorForm");
						//验证
						//附加数据
						var objs = {};
						objs[ACTIONS.POSITION_MODIFY_UNIQUE.params.ORG_ID] = orgId;
						objs[ACTIONS.POSITION_MODIFY_UNIQUE.params.POSITION_ID] = data.dataId;
						$("#name").data("_jqValidate_otherObjs" , objs);
						var validator = form.validate({
								rules: {
									"positionDTO.positionName": {
										required: true,
										dataUnique: ACTIONS.POSITION_MODIFY_UNIQUE,
										maxlength: 16,
										dataName : true
									},
									"positionDTO.note": {
										maxlength: 64
									}
								},
								messages: {
									"positionDTO.positionName": {
										required: "必填项",
										dataUnique: "职位位名称已存在",
										maxlength: "职位名称项的长度不能超过16个字符",
										dataName: "职位名称必须是中英文、数字或下划线"
									},
									"positionDTO.note": {
										maxlength: "职位备注项的长度不能超过64个字符"
									}
								},
								submitHandler : function() {
									updateAllSource();
									var $selectedContent = $(selectedContent);
									$("#positionVersion").val($selectedContent.data("source").version);
									form.ajaxSubmit({async: false, dataType: "json", success: function (data) {
											pushBeUpdateNodeData(data.positionDTOs);
											if(data.positionDTO)
												$selectedContent.data("source", data.positionDTO);
											$selectedContent.find("span.node-value:first").html(form.find("#name").val());
											//更新节点源数据
											$selectedContent.data("source", data.posDTO);
											$(getNodeById(data.posDTO.positionId)).trigger("click");
									}});
								}
							});
						parent.find("input[type='submit']").bind("click", function (event) {
								event.stopPropagation();
							});
					});
			};

			function openAdd()
			{
				updateAllSource();
				if(!positionTree)
					return;
				var parent = $("#positionOpArea");
				var params = {};
				var selectedContent = positionTree.getSelectedContent();
				var selected = positionTree.getSelected();
				params.url = ACTIONS.ADD_POSITION.url;
				if(selectedContent)
					params.pid = selectedContent.id.split("_")[0];
				else
				{
					params.pid = null;
				}
				var orgSelectedOrgContent = tree.getSelectedContent();
				if(orgSelectedOrgContent)
					params.oid = orgSelectedOrgContent.id.split("_")[0];
				else
				{
					params.oid = null;
				}
				oacore.UI.render("form/add_position", params, parent, function () {
						var form = $("#creatorForm");
						//验证
						//附加数据
						var objs = {};
						objs[ACTIONS.POSITIONNAME_UNIQUE.params.ORG_ID] = params.oid == null ? '' : params.oid;
						$("#name").data("_jqValidate_otherObjs" , objs);
						var validator = form.validate({
								rules: {
									"positionDTO.positionName": {
										required: true,
										dataUnique: ACTIONS.POSITIONNAME_UNIQUE,
										maxlength: 16,
										dataName : true
									},
									"positionDTO.note": {
										maxlength: 64
									}
								},
								messages: {
									"positionDTO.positionName": {
										required: "必填项",
										dataUnique: "职位名称已存在,请重新输入",
										maxlength: "职位名称项的长度不能超过16个字符",
										dataName: "职位名称必须是中英文、数字或下划线"
									},
									"positionDTO.note": {
										maxlength: "职位备注项的长度不能超过64个字符"
									}
								},
								submitHandler : function() {
									updateAllSource();
									form.ajaxSubmit({async: false, dataType: "json", success: function (data) {
											pushBeUpdateNodeData(data.positionDTOs);
											var selectedContent = positionTree.getSelectedContent();
											var selected = positionTree.getSelected();
											var newPosObj = data.positionDTOs[data.positionDTOs.length - 1];
											var newPosId = newPosObj.positionId;
											var newPosSource = newPosObj;
											newPosSource.positionName = $(form).find("#name").val();
											newPosSource.note = $(form).find("#description").val();
											if(!selectedContent)
											{
												positionTree.insertToRoot(newPosSource);
											}
											else
											{
												positionTree.append(newPosSource);
											}
											$(getNodeById(newPosId)).trigger("click");
									}});
								}
							});
						parent.find("input[type='submit']").bind("click", function (event) {
								event.stopPropagation();
							});
					});
			};

			function openPosition(orgId) {
				var idInfo = orgId.split("_");
				var params = {};
				params[ACTIONS.POSITION_LIST.params.ORG_ID] = idInfo[0];
				params[ACTIONS.POSITION_LIST.params.VERSION] = idInfo[1];
				$.util.Data.request({
					url: ACTIONS.POSITION_LIST.url,
					data: params,
					async: false,
					dataType: "json",
					type: "post",
					success: function (data) {
						var source = data.positionDTOs;
						positionTree = new $.Tree({
							parent: $("#positionTreeArea"),
							source: source,
							selectMode: "single",
							sortable: true,
							sourceQuote: true,
							sortover: function (node, target) {
								updateAllSource();
								if(!positionTree)
									return;
								var selected = node;
								if(!selected)
									return false;
								var prevNode = target;
								var params = {};
								var prevIdInfo;
								var idInfo = selected.id.split("_");
								if(!prevNode)
									prevIdInfo = [null, null];
								else
								{
									prevIdInfo = prevNode.id.split("_");
								}
								var source = $(selected).data("source");
								if(prevIdInfo[0])
									params[ACTIONS.MOVE_POSITION.params.PREV_POSITION_ID] = prevIdInfo[0];
								params[ACTIONS.MOVE_POSITION.params.POSITION_ID] = idInfo[0];
								params[ACTIONS.MOVE_POSITION.params.VERSION] = source.version;
								$.util.Data.request({
									url: ACTIONS.MOVE_POSITION.url,
									data: params,
									async: false,
									type: "post",
									success: function (data) {
										pushBeUpdateNodeData(data.positionDTOs);
									}
								});
							},
							pretreatment: function (node) {
								var pedNode = {};
								pedNode.id = node.positionId + "_" + node.version + "_" + node.positionName;
								pedNode.content = "<span name='"+node.positionName+"' class='node-value'>" + node.positionName + "</span>";
								return pedNode;
							},
							onSelect: function () {
								openDetail();
							}
						});
					},
					error: function () {
						$("#positionTreeArea").html("获取职位失败!");
					}
				});
			};

			$(function () {
				//生成机构树
				tree = new $.Tree({
					parent: $("#treeArea"),
					source: $.parseJSON(treeData),
					selectMode: "single",
					pretreatment: function (node) {
						node.id += "_" + node.version + "_" + node.content;
						node.content = "<span name='"+node.content+"' class='node-value'>" + node.content + "</span>";
						if(node.child && node.child.length > 0)
							node.children= node.child;
						delete node.child;
						return node;
					},
					onSelect: function (node) {
						$("#positionOpArea").empty();
						openPosition(node.id);
					}
				});

				//给予事件
				$("#openAll").toggle(
							function () {
									$(this).html("全部关闭");
									tree.openAll();
								},
							function () {
									$(this).html("全部展开");
									tree.closeAll();
								}
						);
				$("#del").click(function () {
						delNode();
					});
				$("#add").click(function () {
						openAdd();
					});
				$("#edit").click(function () {
						openEdit();
					});
				$("#moveup").click(function () {
						moveUp();
					});
				$("#movedown").click(function () {
						moveDown();
					});
				$.validator.addMethod("positionName", function (value, element) {
					return /[\d\w_\u4e00-\u9fa5]+$/.test(value);
				}, "职位名称d的格式必须为中英文、数字及下划线");
			});
		</script>
		<style type="text/css">
			div {
				position: static;
			}
			ul.jq-tree {
				margin-left: 16px;
			}
		</style>
	</head>
	<body>
		<div id="mainPage" class="surround-layout">
			<jsp:include page="../frame/top.jsp" flush="true"></jsp:include>
			<div class="middle">
				<jsp:include page="../frame/middle_left.jsp" flush="true">
					<jsp:param value="1026-1030" name="view"/>
				</jsp:include>
				<!-- 右侧输出内容 -->
				<div class="right">
					<div class="right-all-content">
						<div class="inner-dialog main">
							<h1 class="inner-dialog-title">职位管理</h1>
							<div class="inner-dialog-content">
								<table style="width: 100%;height: 100%;" cellspacing="0">
									<tbody>
										<tr>
											<td valign="top" width="30%" class="section">
												<table class="op-part first-part" cellspacing="0" width="100px">
													<tbody>
														<tr>
															<td class="td-title">
																现有机构
															</td>
														</tr>
														<tr>
															<td>
																<div class="tree-op-2"><a href="javascript:void(0);" id="openAll">全部展开</a></div>
															</td>
														</tr>
														<tr>
															<td class="content-td">
																<div id="treeArea" class="tree-area"></div>
															</td>
														</tr>
													</tbody>
												</table>
											</td>
											<td valign="top" class="middle-section section">
												<table class="op-part middle-part" cellspacing="0">
													<tbody>
														<tr>
															<td class="td-title">
																机构下职位
															</td>
														</tr>
														<tr>
															<td class="td-title">
																<table class="tree-op-group">
																	<tbody>
																		<tr>
																			<td>
																				<button class="dd-op add" id="add" title="添加职位"></button>
																			</td>
																			<td>
																				<button class="dd-op moveup" id="moveup" title="上移"></button>
																			</td>
																			<td>
																				<button class="dd-op movedown" id="movedown" title="下移"></button>
																			</td>
																			<td>
																				<button class="dd-op del" id="del" title="删除"></button>
																			</td>
																			<td>
																				<button class="dd-op edit" id="edit" title="编辑"></button>
																			</td>
																		</tr>
																	</tbody>
																</table>
															</td>
														</tr>
														<tr>
															<td class="content-td" style="padding-top: 16px;">
																<div id="positionTreeArea" class="tree-area"></div>
															</td>
														</tr>
													</tbody>
												</table>
											</td>
											<td valign="top" class="section">
												<table class="op-part last-part" cellspacing="0">
													<tbody>
														<tr>
															<td class="td-title">
																职位信息
															</td>
														</tr>
														<tr>
															<td class="content-td" style="padding: 16px;">
																<div id="positionOpArea" class="tree-area"></div>
															</td>
														</tr>
													</tbody>
												</table>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
				<!--  -->
			</div>
		</div>
	</body>
</html>